<template xmlns:v-slot="http://www.w3.org/1999/XSL/Transform">
    <div class="c-layout">
        <!-- 菜单预览 -->
        <div class="c-layout-sidebar">
            <a-menu mode="inline" :default-open-keys="openMenuKeys" :selected-keys="selectedMenuKeys">
                <c-menu-item v-for="menu in dataList"
                             :item="menu"
                             :key="menu['id']"
                             :click-parent-menu-item="clickMenuItem"
                             :click-menu-item="clickMenuItem"/>
            </a-menu>
        </div>
        <!-- 详情 -->
        <div class="c-layout-content">
            <div style="position: fixed;">
                <!-- 操作按钮 -->
                <a-button-group style="margin-bottom: 20px;">
                    <a-button icon="plus" type="primary" @click="clickAddMenuButton">添加</a-button>
                    <a-button icon="edit" type="primary" :disabled="!selectedMenuItem['id']" @click="clickEditMenuButton">修改</a-button>
                    <a-button icon="delete" type="danger" :disabled="!selectedMenuItem['id']" @click="clickDeleteMenuButton">删除</a-button>
                </a-button-group>
                <a-descriptions title="菜单详情" :column="1">
                    <a-descriptions-item label="编号">{{ selectedMenuItem['id'] }}</a-descriptions-item>
                    <a-descriptions-item label="菜单名称">{{ selectedMenuItem['name'] }}</a-descriptions-item>
                    <a-descriptions-item label="权限标识">{{ selectedMenuItem['permission'] }}</a-descriptions-item>
                    <a-descriptions-item label="菜单路径">{{ selectedMenuItem['path'] }}</a-descriptions-item>
                    <a-descriptions-item label="菜单图标">{{ selectedMenuItem['icon'] }}</a-descriptions-item>
                    <a-descriptions-item label="上级编号">{{ selectedMenuItem['pid'] }}</a-descriptions-item>
                    <a-descriptions-item label="排序值">{{ selectedMenuItem['sort'] }}</a-descriptions-item>
                    <a-descriptions-item label="创建时间">{{ selectedMenuItem['createTime'] }}</a-descriptions-item>
                    <a-descriptions-item label="修改时间">{{ selectedMenuItem['lastModifyTime'] }}</a-descriptions-item>
                </a-descriptions>
            </div>
        </div>
        <!-- 表单 -->
        <c-form-modal ref="menuFormModal">
            <template v-slot:formItem="">
                <!-- 菜单名称 -->
                <a-form-item label="菜单名称">
                    <a-input type="text"
                             autocomplete="off"
                             v-decorator="[ 'name',{ rules: [
                                { required: true, message: '请输入菜单名称' },
                                { min:2, message:'长度为2-20个字符' },
                                { max:20, message:'长度为2-20个字符' },
                             ]}]"
                    />
                </a-form-item>
                <!-- 权限标识 -->
                <a-form-item label="权限标识">
                    <a-select @change="changePermission" v-decorator="[ 'permission' ]">
                        <a-select-option v-for="item in pageList" :key="item['permission']">
                            {{ item['name'] }}{{ item['permission'] ? ' - [' + item['permission'] + ']' : '' }}
                        </a-select-option>
                    </a-select>
                </a-form-item>
                <!-- 菜单路径 -->
                <a-form-item label="菜单路径">
                    <a-input type="text"
                             autocomplete="off"
                             v-decorator="[ 'path',{ rules: [
                                { min:0, message:'长度为0-100个字符' },
                                { max:100, message:'长度为0-100个字符' },
                             ]}]"
                    />
                </a-form-item>
                <!-- 菜单图标 -->
                <a-form-item label="菜单图标">
                    <a-input type="text"
                             autocomplete="off"
                             v-decorator="[ 'icon',{ rules: [
                                { min:0, message:'长度为0-20个字符' },
                                { max:20, message:'长度为0-20个字符' },
                             ]}]"
                    />
                </a-form-item>
                <!-- 上级菜单 -->
                <a-form-item label="上级编号">
                    <a-input type="text" v-decorator="['pid',{ initialValue : '0' }]" disabled />
                </a-form-item>
                <!-- 排序值 -->
                <a-form-item label="排序值">
                    <a-input-number type="text" autocomplete="off" v-decorator="['sort']" />
                </a-form-item>
            </template>
        </c-form-modal>
    </div>
</template>

<script>
    import { getPowerList,getAllMenuTree,deleteMenu,addMenu,editMenu } from '@/apis/upms';
    import CMenuItem from '@/components/layout/CMenuItem';
    import CFormModal from '@/components/form/CFormModal';
    export default {
        components : {
            CMenuItem,
            CFormModal
        },
        data(){
            return {
                //  菜单列表
                dataList : [],
                //  展开的菜单节点
                openMenuKeys : [],
                //  选中的Key
                selectedMenuKeys: [],
                //  选中的菜单
                selectedMenuItem : {},
                //  页面列表
                pageList : [],
            };
        },
        created() {
            let $this = this;
            let menuId = $this.$route.query['menuId'];
            //  获取所有菜单数据
            getAllMenuTree().then(res => {
                $this.dataList = res.data;
                //  寻找需要选中的节点
                if (menuId){
                    let item = $this.ergodicMenuItem(res.data,item => menuId === item['id']);
                    this.selectedMenuItem = { ...item };
                    this.selectedMenuKeys.push(menuId);
                }
                //  展开全部菜单
                $this.ergodicMenuItem(res.data,item => {
                    $this.openMenuKeys.push(item['id']);
                    return false;
                });
            });
            //  获取页面列表
            getPowerList({ pid : '0' }).then(res => {
                res.data.unshift({ id : '0', path : '',permission : '', name : '无' });
                $this.pageList = res.data;
            });
        },
        methods : {
            //  遍历节点
            ergodicMenuItem : function(list,callback){
                for (let i = 0; i < list.length; i++){
                    let item = list[i];
                    if (callback(item)){
                        return item;
                    }
                    let children = item['children'];
                    if (children) {
                        //  递归
                        let subItem = this.ergodicMenuItem(children,callback);
                        if (subItem){
                            return subItem;
                        }
                    }
                }
            },
            //  点击菜单事件
            clickMenuItem : function (item) {
                let selectedKeys = this.selectedMenuKeys;
                //  判断是否已是选中状态
                let index = selectedKeys.indexOf(item['id']);
                //  取消选中
                selectedKeys.splice(0,selectedKeys.length);
                //  判断是否需要重新选中
                let menuItem;
                if (index === -1){
                    selectedKeys.push(item['id']);
                    menuItem = item;
                } else {
                    menuItem = { };
                }
                this.selectedMenuItem = menuItem;
                this.$router.push({ name : this.$route.name, query : { menuId : menuItem['id'] } }).then();
            },
            //  点击删除菜单按钮
            clickDeleteMenuButton : function (e) {
                e.preventDefault();
                let $this = this;
                $this.$modal.confirm({
                    title : '删除菜单',
                    content : '确认删除【' + $this.selectedMenuItem['name'] + '】?',
                    onOk : () => deleteMenu($this.selectedMenuItem['id']).then(() => {
                        let pid = $this.selectedMenuItem['pid'];
                        //  判断当前选中的是否为根节点
                        if (pid !== '0'){
                            //  寻找当前选中的父节点
                            let parent = $this.ergodicMenuItem($this.dataList,item => item['id'] === pid);
                            let children = parent['children'];
                            if (parent && children){
                                //  删除元素
                                children.splice(children.indexOf($this.selectedMenuItem),1);
                            }
                        } else {
                            //  删除元素
                            $this.dataList.splice($this.dataList.indexOf($this.selectedMenuItem),1);
                        }
                        //  取消选中状态
                        $this.clickMenuItem($this.selectedMenuItem);
                    })
                });
            },
            //  点击新增菜单按钮
            clickAddMenuButton : function (e) {
                e.preventDefault();
                let $this = this;
                let params = {};
                //  设置父级Id
                if ($this.selectedMenuItem['id']){
                    params['pid'] = $this.selectedMenuItem['id'];
                }
                //  打开弹窗
                $this.$refs['menuFormModal'].open({
                    title : '添加权限',
                    apiInterface : addMenu,
                    callbackFn : () => $this.$router.go(0),
                    data : params
                });
            },
            //  点击修改菜单
            clickEditMenuButton : function(e){
                e.preventDefault();
                let $this = this;
                let params = $this.selectedMenuItem;
                //  打开弹窗
                $this.$refs['menuFormModal'].open({
                    title : '修改权限',
                    apiInterface : editMenu,
                    callbackFn : () => $this.$router.go(0),
                    data : params
                });
            },
            //  修改唯一标识
            changePermission : function (value) {
                for (let i = 0; i < this.pageList.length; i++) {
                    let item = this.pageList[i];
                    if (item['permission'] === value){
                        this.$refs['menuFormModal'].setFieldsValue({ path : item['path'] });
                        break;
                    }
                }
            }
        },
    }
</script>
<style scoped>
    .c-layout{
        display: flex;
    }
    .c-layout .c-layout-sidebar {
        width: 300px;
    }
    .c-layout .c-layout-content{
        width: 100%;
        padding-left: 10px;
        position: relative;
    }
</style>
